<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myMap {
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=aF4dfBtsBD209YNrVcj40nWV7Lm4CQb6"></script>
    <script>
        window.onload = function () {
            //创建地图实例对象
            var myMap = new BMapGL.Map('myMap');
            //设置地图中心点和地图级别
            var centerPoint = new BMapGL.Point(104.069944, 30.579012);
            myMap.centerAndZoom(centerPoint, 15);

            myMap.enableScrollWheelZoom();
            //绑定地图点击事件
            myMap.addEventListener('click',function(event){
                // console.log(event.latlng.lng,event.latlng.lat);
                //创建Point对象
                var point=new BMapGL.Point(event.latlng.lng,event.latlng.lat);
                //添加标注
                var marker=new BMapGL.Marker(point);
                //创建地址解析对象
                var geo=new BMapGL.Geocoder();
                // 获取文本地址信息
                geo.getLocation(point,function(re){
                    console.log(re.address,re.addressComponents.city);
                })
            });

        }
    </script>
</head>

<body>
    <div id="myMap"></div>
</body>

</html>